<template>
  <el-space wrap>
    <span> 选择设备:</span>
    <el-select v-model="selectEquipment" class="m-2" placeholder="Select" style="width: 240px">
      <el-option v-for="item in textValue" :key="item.id" :label="item.label" :value="item" />
    </el-select>
  </el-space>

  <el-row class="dataSource">
    <el-col :span="20">
      <el-table :data="selectEquipment.equipment" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="CommissionTestNumber" label="委试号" width="180" />
        <el-table-column prop="testItem" label="试验项" />
        <el-table-column prop="testPersonnel" label="试验人员" />
        <el-table-column prop="testPersonnel" label="监督人员" />
      </el-table>
    </el-col>
  </el-row>
</template>
<style scoped lang="scss">
.el-row {
  margin: 20px 0 40px 0;
}
.tempDialog {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.dialog-scroll-container {
  max-height: 62vh; /* 限制高度为视口高度的62% */
  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
  padding: 12px; /* 可选：增加内边距避免内容贴边 */
}
</style>
<script setup lang="ts">
const dataSourceA = [
  {
    date: '20250201',
    CommissionTestNumber: '160691G',
    testItem: 'XX11',
    testPersonnel: '张三',
    supervisingPersonnel: 'meiwen',
  },
  {
    date: '20241201',
    CommissionTestNumber: '160106G',
    testItem: 'XX22',
    testPersonnel: '李四',
    supervisingPersonnel: 'textImg',
  },
  {
    date: '20240801',
    CommissionTestNumber: '200904G',
    testItem: 'XX33',
    testPersonnel: '王五',
    supervisingPersonnel: 'zhaopian',
  },
  {
    date: '20230201',
    CommissionTestNumber: '150101G',
    testItem: 'XX44',
    testPersonnel: '张良',
    supervisingPersonnel: 'nfcImg',
  },
]
const dataSourceB = [
  {
    date: '20250321',
    CommissionTestNumber: '140101G',
    testItem: 'XXAA',
    testPersonnel: '鲁班',
    supervisingPersonnel: 'meiwen',
  },
  {
    date: '20250221',
    CommissionTestNumber: '130631G',
    testItem: 'XXBB',
    testPersonnel: '打击',
    supervisingPersonnel: 'textImg',
  },
  {
    date: '20241101',
    CommissionTestNumber: '120431G',
    testItem: 'XXCC',
    testPersonnel: '小明',
    supervisingPersonnel: 'zhaopian',
  },
  {
    date: '20240501',
    CommissionTestNumber: '131231G',
    testItem: 'XXDD',
    testPersonnel: '无极',
    supervisingPersonnel: 'nfcImg',
  },
]
const dataSourceC = [
  {
    date: '20231221',
    CommissionTestNumber: '186535G',
    testItem: 'XX',
    testPersonnel: 'XX',
    supervisingPersonnel: 'meiwen',
  },
  {
    date: '20231101',
    CommissionTestNumber: '142343G',
    testItem: 'XX',
    testPersonnel: 'XX',
    supervisingPersonnel: 'textImg',
  },
  {
    date: '20230601',
    CommissionTestNumber: '14651G',
    testItem: 'XX',
    testPersonnel: 'XX',
    supervisingPersonnel: 'zhaopian',
  },
  {
    date: '20230327',
    CommissionTestNumber: '168631G',
    testItem: 'XX',
    testPersonnel: 'XX',
    supervisingPersonnel: 'nfcImg',
  },
]
const selectEquipment = ref({
  id: 1,
  value: 'A',
  label: '设备A',
  equipment: dataSourceA,
})
const textValue = [
  {
    id: 1,
    value: 'A',
    label: '设备A',
    equipment: dataSourceA,
  },
  {
    id: 2,
    value: 'B',
    label: '设备B',
    equipment: dataSourceB,
  },
  {
    id: 3,
    value: 'C',
    label: '设备C',
    equipment: dataSourceC,
  },
]
</script>

<style scoped lang="scss"></style>
